.wf-supervise{
    .wm-list-advanced{
        .wm-list-advanced-body-content{
            .am-list-body{
                .wm-list-page-item{
                    .am-list-item{
                        .am-list-content{
                            .wm-list-page-item-row{
                                .wm-list-page-item-row-span-text-highlight{
                                    font-weight: normal;
                                }
                            }
                        }
                    }
                }
            }
        }
        .wm-route-layout-buttons{
          .am-flexbox-item{
            .wf-supervised-btn-disabled{
                background:@color-text-disabled;
                color:@color-text-base-inverse;
            }
            .wf-supervised-btn-primary{
                color:@color-text-base-inverse;
                background:@brand-primary;
            }
          }
        }
        
    }
    .wf-signView-panel {
        position: absolute;
        z-index: 100;
        bottom: 0;
        width: 100%;
        background: #eee;
        text-align: left;

    .wf-signView-panel-mask {
      background: @fill-mask;
      height: 100vh;
      width: 100%;
      position: absolute;
      z-index: 99;
      left: 0;
      top: -100vh;
    }

    .wf-signView-panel-content {
      padding: 0 * @hd 10 * @hd;

      .sign-panel-title {
        text-align: center;
        height: 44 * @hd;
        line-height: 44 * @hd;

        .sign-userInfo {
          position: absolute;
          left: 15 * @hd;
          top: 10 * @hd;

          div {
            display: inline-block;
            vertical-align: middle;
            width: auto;
            max-width: 10vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            img {
              width: 30 * @hd;
              height: 30 * @hd;
              border-radius: 50%;
              position: relative;
            }
          }

          .more-user {
            display: inline-block;
            width: 25 * @hd;
            height: 25 * @hd;
            background: @color-text-placeholder;
            border-radius: 50%;
            color: @color-text-base-inverse;
            position: absolute;
            line-height: 34 * @hd;
          }
        }

        .sign-phrase-title {
          display: inline-flex;

          .span-title {
            height: 20 * @hd;
            line-height: 20 * @hd;
            padding-right: 15 * @hd;
            font-size: 17 * @hd;
            color: @color-text-paragraph;
          }

          .am-icon-md {
            width: 20 * @hd;
            height: 20 * @hd;
          }
        }
      }

      .sign-action-btns {
        padding: 15 * @hd 0 10 * @hd 0;

        .sign-action-list {
          width: 100%;
          height: 100%;
          overflow: inherit;

          .am-flexbox-item {
            text-align: center;
          }
        }

        .am-icon-md {
          width: 28 * @hd;
          height: 28 * @hd;
        }

        .set-word {
          position: relative;

          .word-list {
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            top: -70 * @hd;
            left: 50%;
            transform: translateX(-14 * @hd);
            line-height: 24 * @hd;
            background: #242628;
            color: #fff;
            border-radius: 5 * @hd;

            .word-list-arrow {
              position: absolute;
              left: 8 * @hd;
              bottom: -19 * @hd;
              border-top: 10 * @hd solid #242628;
              border-right: 10 * @hd solid transparent;
              border-left: 10 * @hd solid transparent;
              border-bottom: 10 * @hd solid transparent;
            }

            .item {
              margin: 10 * @hd 10 * @hd;
            }

            .tag-h {
              font-weight: normal;
            }
          }
        }

        .out-inputs {
          position: relative;

          .outinput-list {
            position: absolute;
            bottom: 16 * @hd;
            right: 20 * @hd;
            text-align: left;
            background: @fill-base;
            box-shadow: 0 0 12 * @hd #999;
            z-index: 100;
            font-size: 16 * @hd;

            div {
              padding: 10 * @hd;
              min-width: 20vw;
              max-width: 50vw;
              display: flex;
              align-items: center;

              .am-icon {
                margin-right: 15 * @hd;
                color: @color-text-placeholder;
              }

              span {
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 20vw;
                max-width: 50vw;
                white-space: nowrap;

                input {
                  position: absolute;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  opacity: 0;
                  width: 100%;
                }
              }
            }

            .upload-file {
              position: relative;
            }
          }
        }
      }

      .sign-panel-main {
        position: relative;
        border: 1 * @hd solid #ccc;

        .am-list-item {
          border: 1 * @hd solid #B2B2B2;

          .am-textarea-control {
            padding-bottom: 40 * @hd;
          }
        }

        .am-rich-editor {
          .ql-container {
            height: 160 * @hd;
            border: 0 * @hd;
          }

          .ql-toolbar {
            border: 0 * @hd;
            border-bottom: 1 * @hd solid #ccc;
          }
        }

        .sign-position-info {
          width: 100%;
          background:@fill-base;
          display: flex;
          height: 40 * @hd;
          line-height: 40 * @hd;

          .position-show {
            display: inline-block;
            vertical-align: middle;
            width: 100%;
            padding-left: 10 * @hd;
            padding-top: 5 * @hd;

            .am-icon {
              display: inline-block;
              vertical-align: middle;
            }

            .am-button {
              line-height: 28 * @hd;

              .am-icon {
                margin-right: 5 * @hd;
              }

              span {
                display: inline-block;
                vertical-align: middle;
              }
            }

            .position-detail {
              display: inline-block;
              vertical-align: middle;
              width: auto;
              max-width: 80%;
              white-space: nowrap;
              overflow-x: hidden;
              text-overflow: ellipsis;
            }
          }

          .delete-position {
            position: absolute;
            bottom: 30 * @hd;
          }

          .sign-attachment-info {
            width: 60 * @hd;

            .sign-attachment-info_dt {
              display: inline-block;
              vertical-align: middle;
              position: relative;

              .am-icon {
                margin-left: 7 * @hd;
                margin-top: 7 * @hd;
                width: 16 * @hd;
                height: 16 * @hd;
              }

              width: 30 * @hd;
              height: 30 * @hd;
              background-image: linear-gradient(-90deg, #56BACE 18%, #76D29F 92%);
              border-radius: 50%;
              color: @color-text-base-inverse;

              .sign-attachment-dot {
                display: block;
                position: absolute;
                width: 8 * @hd;
                height: 8 * @hd;
                background: @brand-important;
                border: 1 * @hd solid #FFFFFF;
                border-radius: 50%;
                top: 2 * @hd;
                right: -5 * @hd;
              }
            }
          }
        }

      }
    }

    .sign-panel-bottom {
      border-top: 1 * @hd solid #ccc;

      .sign-bottom-container {
        height: 44 * @hd;
        background: @fill-grey;

        .sign-bottom-item {
          text-align: center;

          .pointer {
            display: inline-block;
            vertical-align: middle;
            height: 20 * @hd;
          }
        }

        .wf-bottomOperate-split {
          float: right;

          .wf-bottomOperate-split-line {
            width: 2 * @hd;
            height: 20 * @hd;
            background-color: #DCDCDC;
            margin: auto;
          }
        }
      }
    }

    .sign-sound-input {
      height: 220 * @hd;
      border-top: 1 * @hd solid #DCDCDC;
      position: relative;

      .sound-input-container {
        height: 100%;
        padding: 15 * @hd 0;
        font-size: 16 * @hd;
        color: #666;

        .sound-area {
          width: 100 * @hd;
          height: 100 * @hd;
          background: @brand-primary;
          line-height: 140 * @hd;
          text-align: center;
          border-radius: 50%;
          color: @color-text-base-inverse;

          .am-icon {
            width: 50%;
            height: 50%;
          }
        }
      }

      .goBack {
        position: absolute;
        right: 15 * @hd;
        bottom: 10%;
        color: @color-text-caption;

        .am-icon {
          width: 30 * @hd;
          height: 30 * @hd;
        }
      }
    }
  }
}